import React from "react";

// let box=(
//     <div className="box">
//         <h1 className="h1">我是demo组件</h1>
//     </div>
// )

// function Demo(){
//     return box
// }
// function DemoA(){
//     return React.createElement(
//         "div",
//         {className:"box"},
//         [
//             React.createElement("h1",{className:"h1",key:2},"我是demo组件")
//         ]
//     )
// }




//类组件写法
// class DemoA extends React.Component{

//     render(){
//         let a="box1"
//         let b ="box2"
//         return (
//             <>
//             <div>
//                 <h1 className={`${a} box3 ${b}`} style={{color:"red",fontSize:"20px"}}>我是demo组件</h1>
//             </div>
//             </>

//         )
//     }
// }


// let Ml ={
//     buttom(props){
//         let {name}=props
//         return <button>{name}</button>
//     },
//     form(props){
//         let {children}=props
//         return <div>{children}</div>
//     }
// }

// class DemoA extends React.Component{

//         render(){
//             let a="box1"
//             let b ="box2"
//             return (

//                 <div>
//                     <Ml.buttom name="故事"></Ml.buttom>
//                     <Ml.form>你好</Ml.form>
//                 </div>


//             )
//         }
//     }

class DemoA extends React.Component {
    //这里的props用来接收父传递的属性
    constructor(props) {
        super(props)
        this.state = {
            num: 1
        }
    }
    add() {
    //    this.setState({
    //     num:this.state.num+1
    //    },()=>{
    //     console.log("执行回调");
        
    //    })
    this.setState((_,props)=>{
        console.log(props);
        
    },()=>{
        console.log("1..");
        
    })
    }
    render() {
        let { num } = this.state
        return (
            <div>
                <h1>{num}</h1>
                <button onClick={() => { this.add() }}>点击添加</button>

            </div>


        )
    }
}

export default DemoA

